<template>
  <div>
    <!--    购买弹窗-->
    <el-dialog
      :visible.sync="addPayVisible"
      width="75%"
      center
      :show-close="false"
    >
      <span slot="title" style="font-weight: bolder;color: goldenrod">
        正在为:【{{ member.memberName }}】进行支付
        <br>
        其现在金额为【{{ member.balance }}】元
      </span>
      <!--          选择搜索框-->
      <el-input v-model="search" placeholder="请输入关键字查询" style="width: 80%;background-color: #fff;left: 10%">
        <el-select slot="prepend" v-model="select" placeholder="请选择" style="width: 120px">
          <el-option label="产品名称" value="gooseName" />
          <el-option label="售价" value="price" />
          <el-option label="成本" value="cost" />
          <el-option label="产品ID" value="gooseID" />
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="inquire" />
      </el-input>
      <!--      选中商品展示表格-->
      <el-table
        :data="gooseData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe
        :header-cell-style="headClass"
        :cell-style="rowClass"
      >
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          sortable
        />
        <el-table-column
          prop="gooseId"
          label="产品ID"
        />
        <el-table-column
          prop="gooseName"
          label="产品名称"
        />
        <el-table-column
          prop="standard"
          label="规格"
        />
        <el-table-column
          prop="price"
          label="售价(元)"
          sortable
        >
          <template #default="scope">
            <el-input-number
              v-model="scope.row.price"
              controls-position="right"
              size="small"
              :step="0.1"
              :min="0"
              :max="1000"
            />
          </template>
        </el-table-column>
        <el-table-column label="数量" width="160px">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.num"
              size="small"
              :min="0"
              :max="100"
            />
          </template>
        </el-table-column>
        <el-table-column label="总价(元)">
          <template #default="scope">
            <div>
              {{ scope.row.price * scope.row.num }}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-tag style="margin-top: 10px" type="success">商品小结:</el-tag>
      <!--      form计算区域-->
      <el-form :inline="true" :model="addPayForm" label-width="60px">
        <el-form-item
          label="总数:"
          prop="sum"
        >
          <el-input v-model="addPayForm.sum" :disabled="true" style="width: 90px" />
        </el-form-item>
        <el-form-item
          label="总价:"
          prop="sumMoney"
        >
          <el-input v-model="addPayForm.sumMoney" :disabled="true" style="width: 90px" />
        </el-form-item>
        <el-form-item
          label="实收:"
          prop="realMoney"
        >
          <el-input v-model="addPayForm.realMoney" style="width: 90px" />
        </el-form-item>
        <div style="margin-top: 50px;text-align: center">
          <el-button style="margin-right: 20px" size="big" @click="cancel">取 消</el-button>
          <el-button style="margin-left: 20px" size="big" type="primary" @click="submit">支付</el-button>
        </div>
      </el-form>

    </el-dialog>
    <!--    选择商品弹窗-->
    <el-dialog
      :visible.sync="selectGooseVisible"
      width="55%"
      center
      title="选择商品"
    >
      <el-button type="primary" @click="selectGoose">添加选中</el-button>
      <!--    表格区域-->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe
        :header-cell-style="headClass"
        :cell-style="rowClass"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          sortable
        />
        <el-table-column
          prop="gooseId"
          label="产品ID"
          sortable
        />
        <el-table-column
          prop="gooseName"
          label="产品名称"
        />
        <el-table-column
          prop="standard"
          label="规格"
        />
        <el-table-column
          prop="price"
          label="售价"
          sortable
        />
        <el-table-column
          label="图片"
        >
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.photoUrl"
              :preview-src-list="[scope.row.photoUrl]"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="handleSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div style="margin: 10px 0">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
<!--    支付弹窗组件-->
    <PayOrder
      ref="payOrder"
      :gooseData="gooseData"
      :addPayForm="addPayForm"
      :member="this.member"
    />
  </div>
</template>

<script>

import { getToken } from '@/utils/auth'
import { selectGoose } from '@/api/goose'
import PayOrder from '@/components/PayOrder'
import { Message } from '_element-ui@2.13.2@element-ui'
import { uuid } from '@/utils'
export default {
  name: 'PlayVisible',
  props: ['member'],
  components: {
    PayOrder
  },
  data() {
    return {
      // 商品选中数据
      gooseData: [],
      // 选择商品弹窗
      selectGooseVisible: false,
      // 支付弹出表
      addPayForm: {},
      // 支付弹窗
      addPayVisible: false,
      // 由于未使用request函数需要手动添加头部token
      myHeaders: { 'X-Token': getToken() },
      // 每页查看数量
      pageSizes: [10, 20, 50, 200],
      // 每页显示数量
      pageSize: 10,
      // 总数量
      total: 0,
      // 当前页
      currentPage: 1,
      // 查询输入框
      search: '',
      // 查询选择项目
      select: 'gooseName',
      // 表格数据
      tableData: [],
      // 选中数据
      multipleSelection: []
    }
  },
  methods: {
    // 支付弹窗取消
    cancel() {
      // 清空数据
      this.addPayVisible = false
      this.addPayForm = {}
      this.gooseData = []
    },
    // 支付弹窗确认
    submit() {
      // 判断余额是否足够
      if ((this.member.balance) - (this.addPayForm.realMoney) <= 0) {
        Message({
          message: '余额不足!!!',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        // 移除数量为0的数据,不生成订单
        for (let i = 0; i < this.gooseData.length; i++) {
          if (this.gooseData[i].num === 0) {
            this.gooseData.splice(i, 1)
            i--
          }
        }
        if (this.gooseData.length === 0) {
          return
        }
        // 生成账单号
        this.addPayForm['billId'] = uuid(8, 10)
        // 开启支付弹窗
        this.$refs.payOrder.payVisible = true
      }
    },
    // 页码跟序号处理 工具
    indexMethod(index) {
      const currentPage = this.currentPage // 当前页码
      const pageSize = this.pageSize // 每页条数
      return index + 1 + (currentPage - 1) * pageSize // 返回表格序号
    },
    // 日期处理 工具
    formatDate(row, column) {
      // 获取单元格数据
      const data = row[column.property]
      if (data == null) {
        return null
      }
      const dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    // 点击查询
    inquire() {
      // 调用查询方法
      this.selectPage(this.currentPage, this.pageSize)
      this.selectGooseVisible = true
    },
    // 查询代码抽取 工具
    selectPage(currentPage, pageSize) {
      new Promise((resolve, reject) => {
        // 查询求情
        selectGoose(currentPage, pageSize, this.search, this.select).then(res => {
          // 赋值给页面渲染
          this.tableData = res.data.records
          // 赋值总数
          this.total = res.data.total
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 改变每页显示条数触发
    handleSizeChange(val) {
      this.pageSize = val
      this.selectPage(this.currentPage, val)
    },
    // 改变当前页码触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.selectPage(val, this.pageSize)
    },
    // 表头居中显示
    headClass() {
      return 'text-align:center'
    },
    // 表格数据居中显示
    rowClass() {
      return 'text-align:center'
    },
    // 全选或全不选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 多选商品
    selectGoose() {
      for (const multipleSelection of this.multipleSelection) {
        this.$set(multipleSelection, 'num', 1)
        this.gooseData.push(multipleSelection)
      }
      if (this.multipleSelection.length !== 0) {
        this.selectGooseVisible = false
      }
    },
    // 选择商品
    handleSelect(row) {
      // 增加一个属性存储数量
      this.$set(row, 'num', 1)
      this.gooseData.push(row)
      this.selectGooseVisible = false
    }
  },
  watch: {
    'gooseData': {
      handler(newName, oldName) {
        // 设置响应式
        this.$set(this.addPayForm, 'sum', 0)
        this.$set(this.addPayForm, 'sumMoney', 0)
        this.$set(this.addPayForm, 'realMoney', 0)
        for (const i of newName) {
          this.addPayForm.sumMoney += i.price * i.num
          this.addPayForm.sum += i.num
        }
        this.addPayForm.realMoney = this.addPayForm.sumMoney
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
